<template>
  <div class="components_display">
    <div class="dis_item">
      <div v-for="item in components" :key="item.name">
      <p class="dis_title">{{item.name}}</p>
      <div class="items">
        <div class="tag_item" v-for="obj in item.arr" :key="obj.title" @mousedown.prevent="handleComponentDrag($event,obj.type)">
          <i :class="obj.icon"></i>
          <span class="text">{{obj.title}}</span>
        </div>
      </div>
      </div>
      </div>
  </div>
</template>

<script>
export default {
  name: "ComponentsDisplay",
  data() {
    return {
      components: [
        { 
          name: "基础元件",
          arr:[
            // {
            //   icon:"el-icon-s-unfold",
            //   title:'文本＋输入框'
            // },
            {
              icon:"el-icon-s-order",
              title:'多行文本',
              type:'textarea'
            },
            {
              icon:"el-icon-s-comment",
              title:'输入框',
              type:'input'
            }
          ]
         },
        //  { 
        //   name: "章节元件",
        //   arr:[
        //     {
        //       icon:"el-icon-info",
        //       title:'标题'
        //     },
        //     {
        //       icon:"el-icon-s-grid",
        //       title:'章节'
        //     },
        //     {
        //       icon:"el-icon-menu",
        //       title:'子章节'
        //     },
        //     {
        //       icon:"el-icon-folder-opened",
        //       title:'附件'
        //     }
        //   ]
        //  },
        //  { 
        //   name: "布局元件",
        //   arr:[
        //     {
        //       icon:"el-icon-s-data",
        //       title:'表格布局'
        //     }
        //   ]
        //  },
        ],
    };
  },
  methods: {
    handleComponentDrag(evt,type) {
      let {target}=evt;
      if(!target)return;
      let {top,left}=target.getBoundingClientRect();
      let offsetTop=evt.clientY-top;
      let offsetLeft=evt.clientX-left;
      document.onmousemove=(e)=>{
        let top=e.clientY-offsetTop + 'px';
        let left=e.clientX-offsetLeft + 'px';
        this.$emit('sendAxis',{top,left,type});
        this.$emit('toggleDragState',true);
      }
      document.onmouseup=()=>{
        document.onmousemove=null;
        this.$emit('toggleDragState',false)
      }
    }
  },
};
</script>

<style lang="scss" scoped>
.components_display {
  width: 366px;
  height: 100%;
  margin:  0 10px;
  padding: 20px 10px;
  border: 1px solid #ccc;
  border-radius: 18px;
  box-sizing: border-box;
  .dis_item {
    .dis_title {
      color: #909399;
    }
    .items {
      margin-left: 20px;
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      color: #000000;
      .tag_item {
        cursor: pointer;
        line-height: 30px;
        height: 30px;
        width: 130px;
        padding: 2px 10px;
        background: #f4f6fc;
        margin-bottom: 10px;
        margin-right: 10px;
        border-radius: 4px;
        .text {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>